<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="avue-contail"
       :class="{'avue--collapse':isCollapse,}">
    <div class="avue-layout"
         :class="{'avue-layout--horizontal':isHorizontal}">
      <div class="avue-sidebar"
           v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo />
        <sidebar />
        <!-- 顶部导航栏 -->

        <top  v-if="setting.topbar"/>
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
<!--        <top  v-if="!setting.topbar && ismobile" />-->
        <top  v-if="!setting.topbar"/>
        <!-- 顶部标签卡 -->
        <tags v-show="setting.tag" />
        <search class="avue-view"
                v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view"    :class="{'avue-view-1200':setting.topbar==2}"
             v-show="!isSearch"
             v-if="isRefresh">
          <router-view #="{ Component }">
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
        <div class="avue-footer">
          <p class="copyright">{{website.copyright}}</p>
        </div>
      </div>
    </div>
<!--    <wechat></wechat>-->
  </div>
</template>

<script>
import index from '@/framework-core/mixins/index'
import wechat from './wechat.vue'
import { validatenull } from '@/framework-core/utils/validate'
import { hasMobile } from '@/framework-core/utils/util'
import { mapGetters } from "vuex";
import tags from "./tags.vue";
import search from "./search.vue";
import logo from "./logo.vue";
import top from "./top/index.vue";
import sidebar from "./sidebar/index.vue";
import store from '@/framework-core/store/';
import website from '@/framework-core/config/website';

export default {
  mixins: [index],
  components: {
    top,
    logo,
    tags,
    search,
    sidebar,
    wechat
  },
  name: "index",
  data () {
    return {
      ismobile : hasMobile(),
      myEventSource:{},
    };
  },
  provide () {
    return {
      index: this
    };
  },
  beforeDestroy() {
    // 断开连接
    if (this.myEventSource) {
      this.myEventSource.close();
    }
  },
  mounted () {
    this.myEventSource = new EventSource(website.baseUrl + '/api/chat/online?group=w_site&jrtoken=' + store.getters.token);

    let self = this;//因EventSource中this的指向变了，所以要提前存储一下
    this.myEventSource.onopen = function() {
      console.log('网站Eventsource成功');
    };
    this.myEventSource.onmessage = function(event) {
      console.log('返回数据:' + event.data);
      var vdata = JSON.parse(event.data);
      if(self) {
        if (vdata.content) {
          var ntitle = vdata.title || "提示";
          var nmessage = self.fixMarkdown(vdata.content);
          var duration = ("NOTIFY" == vdata.msgType || "TODO" == vdata.msgType || "LINK" == vdata.msgType) ? 0 : 3000;
          var dangerouslyUseHTMLString = vdata.link ? true : false;
          if (vdata.link) {
            if ("TODO" == vdata.msgType) {
              nmessage += "<br><a href='" + vdata.link + "'   target=\"_blank\" >去办理</a>"
            } else {
              nmessage += "<br><a href='" + vdata.link + "'   target=\"_blank\" >去下载</a>"
            }
          }
          self.$notify({
            title: ntitle,
            type: 'warning',
            dangerouslyUseHTMLString: dangerouslyUseHTMLString,
            message: nmessage,
            duration: duration
          });
        }

      }
    };
    this.myEventSource.onerror = function (){
      console.log('网站Eventsource链接失败');

    };
  },

  computed: {
    ...mapGetters([ "isHorizontal","isRefresh", "isLock", "isCollapse", "isSearch", "menu", "setting"]),
    validSidebar () {
      this.$route.meta = {"topbar":false,"sideba":"horizontal"}

      if( hasMobile()){
        this.setting.tag = false;
        this.setting.topbar = 0
        this.setting.isHorizontal = false;
      }


      // this.setting.topbar = (this.$route.meta || {}).topbar ||  this.setting.topbar;
      // setting.sideba = (this.$route.meta || {}).sideba ||   setting.sideba;
      return !((this.$route.meta || {}).menu == false || (this.$route.query || {}).menu == 'false')
    }
  },
  props: [],
  methods: {
    fixMarkdown(message) {
      message = message.replaceAll('<br>', '\n');
      message = message.replaceAll('&nbsp;', ' ');
      message = message.replaceAll('&lt;','<');
      message = message.replaceAll('&gt;','>');
      return message;
    },
    //打开菜单
    openMenu (item = {}) {
      this.$store.dispatch("GetMenu", item.parentId).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单做的事件
        if (!validatenull(item)) {
          let itemActive = {},
                  childItemActive = 0;
          //vue-router路由
          if (item.path) {
            itemActive = item;
          } else {
            if (this.menu[childItemActive].length == 0) {
              itemActive = this.menu[childItemActive];
            } else {
              itemActive = this.menu[childItemActive].children[childItemActive];
            }
          }
          this.$store.commit('SET_MENUID', item);
          this.$router.push({
            path: itemActive.path
          });
        }

      });
    },
  }
};
</script>

<style lang="scss" scoped>
.avue-view-1200{
  width: 75%;
  margin: auto;
  text-align: center;
}


.el-collapse-item__wrap{
  padding-top: 2px!important;
}

</style>


